<template>
  <view class="p-10rpx pb-200rpx">
    <view class="bg-white px-10rpx py-20rpx rounded-16rpx">
      <view
        v-for="(item, index) in filedOptions"
        :key="index"
        class="justify-between items-center px-10rpx py-30rpx b_b"
        :class="item.componentType === 'upload' ? '' : 'flex'"
      >
        <view class="label">{{ item.label }}</view>
        <view :class="item.componentType === 'upload' ? '' : 'flex-1'">
          <view @tab="chooseLocations" @click="chooseLocations">
            <u-input
              v-if="item.componentType === 'map'"
              v-model="mapAddress"
              suffix-icon="arrow-right"
              suffix-icon-style="color: #999"
              placeholder="请选择地点"
              readonly
              input-align="right"
              border="none"
              :placeholder-style="{ 'font-size': '28rpx' }"
            />
          </view>
          <u-input
            v-if="item.componentType === 'input'"
            v-model="address"
            placeholder="请输入详细地址"
            input-align="right"
            border="none"
            :placeholder-style="{ 'font-size': '28rpx' }"
          />
          <view v-if="item.componentType === 'upload'" class="mt-10rpx">
            <u-upload
              width="100"
              height="100"
              multiple
              :file-list="fileList"
              :max-count="3"
              @afterRead="afterRead"
              @delete="deletePic"
            ></u-upload>
          </view>
        </view>
      </view>
      <view class="px-10rpx pt-30rpx b_b">
        <view class="label">请选择并输入涉黄信息</view>
        <view class="pt-30rpx">
          <u-checkbox-group v-model="shSelect" placement="row">
            <u-checkbox
              v-for="(item, index) in checkboxListOprions"
              :key="index"
              :custom-style="{ marginBottom: '16px', marginRight: '20rpx' }"
              :label="item.name"
              :name="item.value"
            ></u-checkbox>
          </u-checkbox-group>

          <view
            v-if="shSelect.includes(1)"
            class="flex justify-between items-center px-10rpx py-30rpx b_b"
          >
            <view class="label">手机号码</view>
            <view class="flex-1">
              <u-input
                v-model="shInfoForm.phone"
                placeholder="请输入卡片上的手机号"
                input-align="right"
                type="number"
                maxlength="11"
                border="none"
              />
            </view>
          </view>
          <view
            v-if="shSelect.includes(2)"
            class="flex justify-between items-center px-10rpx py-30rpx b_b"
          >
            <view class="label">微信号</view>
            <view class="flex-1">
              <u-input
                v-model="shInfoForm.wx"
                placeholder="请输入卡片上的微信号"
                input-align="right"
                border="none"
              />
            </view>
          </view>
          <view
            v-if="shSelect.includes(3)"
            class="flex justify-between items-center px-10rpx py-30rpx b_b"
          >
            <view class="label">QQ号</view>
            <view class="flex-1">
              <u-input
                v-model="shInfoForm.qq"
                placeholder="请输入卡片上的QQ号"
                input-align="right"
                type="number"
                border="none"
              />
            </view>
          </view>
          <view v-if="shSelect.includes(4)" class="px-10rpx py-30rpx b_b">
            <view class="label">二维码</view>
            <view class="mt-10rpx">
              <u-upload
                width="100"
                height="100"
                multipl
                :file-list="qrList"
                :max-count="1"
                @afterRead="afterRead($event, 'qr')"
                @delete="deletePic($event, 'qr')"
              ></u-upload>
            </view>
          </view>
          <view class="flex justify-between items-center px-10rpx py-30rpx b_b">
            <view class="label">卡片数量</view>
            <view class="flex-1">
              <u-input
                v-model="shInfoForm.num"
                placeholder="请输入发现的卡片数量"
                input-align="right"
                type="number"
                maxlength="3"
                border="none"
              />
            </view>
          </view>
          <view class="flex justify-between items-center p-10rpx py-30rpx b_b">
            <view class="label">所属身份/单位</view>
            <view class="flex-1">
              <picker
                :range="userTypeList"
                range-key="name"
                @change="handlePickUserType"
              >
                <u-input
                  v-model="shInfoForm.userType"
                  placeholder="请选择您的身份/单位"
                  suffix-icon="arrow-right"
                  suffix-icon-style="color: #999"
                  input-align="right"
                  readonly
                  border="none"
                />
              </picker>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bottom-box">
      <u-button
        text="提交"
        color="#316ED2"
        :throttle-time="600"
        :loading="loading"
        @click="handleSubmit"
      />
    </view>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { toPromise, showModal } from '@/utils'
import check from './check'
import { map } from 'lodash-es'
import dayjs from 'dayjs'

@Component({
  name: 'HuanForm'
})
export default class HuanForm extends Vue {
  loading = false

  mapAddress = ''
  address = ''
  fileList: Recordable = []
  shSelect = [1]
  shInfoForm: Recordable = {
    phone: '',
    wx: '',
    qq: '',
    num: null,
    userType: ''
  }
  qrList: Recordable = []
  handlePickUserType({ detail }: any) {
    this.shInfoForm.userType = this.userTypeList[+detail.value]?.name
  }
  async handleSubmit() {
    this.loading = true
    try {
      check(this)
      const { mapAddress, address, fileList, shSelect, shInfoForm, qrList } =
        this
      const { phone, wx: wxh, qq, num, userType } = shInfoForm
      const req = {
        mapAddress,
        address,
        fileList: map(fileList, 'url'),
        shSelect,
        qrList: map(qrList, 'url'),
        phone,
        wx: wxh,
        qq,
        num,
        userType,
        createTime: dayjs().valueOf()
      }
      await wx.cloud.callFunction({
        name: 'submit',
        data: { data: req }
      })
      await showModal({ content: '提交成功', showCancel: false })
      uni.navigateBack()
    } finally {
      this.loading = false
    }
  }
  deletePic(event: any, type: string) {
    if (type === 'qr') {
      this.qrList.splice(event.index, 1)
      return
    }
    this.fileList.splice(event.index, 1)
  }
  async afterRead(event: any, type: string) {
    let lists: any = [].concat(event.file)
    lists.forEach((item: any) => {
      const items = {
        ...item,
        status: 'uploading',
        message: '上传中'
      }
      if (type === 'qr') {
        this.qrList.push(items)
        return
      }
      this.fileList.push(items)
    })
    const arr = type === 'qr' ? this.qrList : this.fileList
    for (let i = 0; i < arr.length; i++) {
      if (arr[i]?.status === 'uploading') {
        const result = await this.uploadImg(arr[i]?.thumb)
        let item = arr[i]
        type === 'qr'
          ? this.qrList.splice(
              i,
              1,
              Object.assign(item, {
                status: 'success',
                message: '',
                url: result
              })
            )
          : this.fileList.splice(
              i,
              1,
              Object.assign(item, {
                status: 'success',
                message: '',
                url: result
              })
            )
      }
    }
  }
  async uploadImg(filePath: string) {
    const { fileID } = await wx.cloud.uploadFile({
      cloudPath: new Date().getTime().toString(),
      filePath // 文件路径
    })
    const { fileList } = await wx.cloud.getTempFileURL({
      fileList: [fileID]
    })
    return fileList[0]?.tempFileURL
  }
  latitude = 0
  longitude = 0
  async chooseLocations() {
    uni.chooseLocation({
      latitude: this.latitude,
      longitude: this.longitude,
      success: async ({ address }) => {
        this.mapAddress = address
      },
      fail: console.log
    })
  }
  readonly checkboxListOprions = [
    {
      name: '手机号',
      value: 1
    },
    {
      name: '微信',
      value: 2
    },
    {
      name: 'QQ号',
      value: 3
    },
    {
      name: '二维码',
      value: 4
    }
  ]
  readonly filedOptions = [
    {
      label: '发现地点',
      componentType: 'map'
    },
    {
      label: '详细地址',
      componentType: 'input'
    },
    {
      label: '请上传涉黄图片',
      componentType: 'upload'
    }
  ]
  readonly userTypeList = [
    {
      name: '群众'
    },
    {
      name: '学生'
    },
    {
      name: '警察'
    },
    {
      name: '医生'
    },
    {
      name: '其他'
    }
  ]
  async onLoad() {
    const { latitude, longitude } = await toPromise(uni.getLocation, {
      type: 'gcj02',
      isHighAccuracy: false
    })
    this.latitude = latitude
    this.longitude = longitude
  }
}
</script>

<style lang="scss" scoped>
.label {
  color: #333;
  margin-right: 10rpx;
  font-size: 28rpx;
  &::before {
    content: '*';
    color: red;
    margin-right: 4rpx;
  }
}
.b_b {
  border-bottom: 1rpx #eee solid;
  &:last-child {
    border-bottom: none;
  }
}
</style>
